<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tr {
            display: flex;
        }

        .tr .td {
            flex: 1;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: white;

        }

        .tr .td input {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="table">
            <div class="tr">
                <div class="td">
                   全选 <input type="checkbox" :checked="checkedAll" @change="setCheckedAll"/>
                </div>
                <div class="td">
                    名称
                </div>
                <div class="td">
                    数量
                </div>
                <div class="td">
                    单价
                </div>
                <div class="td">
                    小计
                </div>
                <div class="td">
                    操作
                </div>
            </div>
        
            <div v-if="list.length">

                <div class="tr" v-for="item in list">
                    <div class="td">
                        <input type="checkbox"  v-model="item.checked"/>
                    </div>
                    <div class="td">
                        {{item.goodsname}}
                    </div>
                    <div class="td">
                        <button v-show="item.goodsnum>1" @click="calc(item,-1)">-</button>
                        <input v-model="item.goodsnum" />
                        <button @click="calc(item,1)">+</button>
                    </div>
                    <div class="td">
                        {{item.goodsprice}}
                    </div>
                    <div class="td">
                        {{item.goodsnum * item.goodsprice}}
                    </div>
                    <div class="td" @click="delById(item.id)">
                        删除
                    </div>
                </div>
                <div class="tr">
                    <div class="td">
                               </div>
                    <div class="td">
                        
                    </div>
                    <div class="td">
                        {{totalNum}}
                    </div>
                    <div class="td">
                        
                    </div>
                    <div class="td">
                        {{totalPrice}}
                    </div>
                    <div class="td">
                        
                    </div>
                </div>
            </div>

            <div v-else class="tr">
               <div class="td">正在请求</div>
            </div>
        </div>
    </div>


</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkedAll:false,
            list: [{ id: 1, goodsname: "商品一", goodsnum: 1, goodsprice: 100,checked:false },
            { id: 2, goodsname: "商品二", goodsnum: 2, goodsprice: 200,checked:false },
            { id: 3, goodsname: "商品三", goodsnum: 3, goodsprice: 300,checked:false},
            { id: 4, goodsname: "商品四", goodsnum: 4, goodsprice: 400,checked:false }]

        },
        methods: {
            calc(info, num) {//巧妙的使用了 引用类型
                info.goodsnum = info.goodsnum + num;
            },
            delById(id){
               this.list = this.list.filter(item=>item.id!==id);
            },
            setCheckedAll(){
                this.list.forEach(item=>item.checked = window.event.target.checked);
            }
        },
        computed:{
            totalNum(){
                let num  = 0;
                let  checkedList = this.list.filter(item=>item.checked);
                console.log(checkedList);
                if(checkedList.length){
                    num  = checkedList.map(item=>item.goodsnum).reduce((a,b)=>{
                        return  a +b;
                    })
                 
                }
                return  num;
            },
            totalPrice(){
                let num  = 0;
                let  checkedList = this.list.filter(item=>item.checked);
                console.log(checkedList);
                if(checkedList.length){
                    num  = checkedList.map(item=>item.goodsnum*item.goodsprice).reduce((a,b)=>{
                        return  a +b;
                    })
                 
                }
                return  num;

            }

        },
        watch:{
            list:{
                deep:true,
                handler(){
                    this.checkedAll =this.list.length? this.list.every(item=>item.checked):false;
                }
            }
        }
    })

</script>

</html>